import { useState, useEffect} from 'react'
import { observer } from "mobx-react-lite";
import { useStore } from 'store/index'
import request from 'service/fetch'
import { Tabs,Button, message } from 'antd'
import * as ANID_ICONS from '@ant-design/icons'
import styles from './index.module.scss'

const { TabPane } = Tabs;

interface IUser {
    id: number;
    nickname: string;
    avatar_url: string;
}

interface Itag {
    id: number;
    title: string;
    icon: string;
    follow_count: number;
    article_count: number;
    users: IUser[]
}

const Tag = () => {
    // state
    const store = useStore()
    const { userId } = store?.user?.userInfo
    // data
    const [followTags, setfollowTags] = useState<Itag[]>()
    const [allTags, setallTags] = useState<Itag[]>()
    
    // 解决刷新页面数据
    const [needRefresh, setneedRefresh] = useState(false)

    // 获取标签列表
    useEffect(() => {
        request('/api/tag/get').then((res: any) => {
            if(res?.code === 0){
                const { followTags = [], allTags = [] } = res.data
                setfollowTags(followTags)   
                setallTags(allTags)
            }
        })
    }, [needRefresh])

    const hanlefollow = (tagId:number) => {
        request.post('/api/tag/follow', { tagId,type:'follow' }).then((res: any) => {
            if(res?.code === 0){
                message.success('关注成功')
                setneedRefresh(!needRefresh)
            }else{
                message.error(res?.message || '关注失败')
            }
        })
    }

    const hanleUnfollow = (tagId: number) => {
        request.post('/api/tag/follow', {tagId, type:'unfollow'}).then((res: any) => {
            if(res?.code === 0){
                message.success('取消成功')
                setneedRefresh(!needRefresh)
            }else{
                message.error( res?.message ||  '取消失败')
            }
        })
    }

    return (
        <div className='content-layout'>
          <Tabs defaultActiveKey='all'  >
            <TabPane tab='已关注标签' key='follow' >
                <div className={styles.tags}>
                    {
                        followTags?.map(tag => (
                        <div className={styles.tagWrapper}>
                            <div>{(ANID_ICONS as any) [ tag?.icon ] ?.render()}</div>
                            <div className={styles.title}>{tag?.title}</div>
                            <div>{tag?.follow_count} 关注 {tag?.article_count} 文章</div>
                            {
                                tag?.users?.find((user) => Number(user?.id )=== Number(userId)) ? (
                                    <Button type='primary' onClick={() => hanleUnfollow(tag?.id)}>已关注</Button>      
                                )
                                :  (
                                    <Button  onClick={() => hanlefollow(tag?.id)}>+关注</Button> 
                                )
                            }
                        </div>
                        ))
                    }
                </div>
            </TabPane>
            <TabPane tab='全部标签' key='all' >
                <div className={styles.tags}>
                    {
                        allTags?.map((tag) => (
                        <div className={styles.tagWrapper}>
                            <div>{(ANID_ICONS as any) [tag?.icon]?.render()}</div>
                            <div className={styles.title}>{tag?.title}</div>
                            <div>{tag?.follow_count} 关注 {tag?.article_count} 文章</div>
                            {
                                tag?.users?.find((user) => Number(user?.id )=== Number(userId)) ? (
                                    <Button type='primary' onClick={() => hanleUnfollow(tag?.id)}>已关注</Button>      
                                )
                                :  (
                                    <Button  onClick={() => hanlefollow(tag?.id)}>+关注</Button> 
                                )
                            }
                        </div>
                        ))
                    }
                </div>
            </TabPane>
          </Tabs>
        </div>
    )
}

export default observer(Tag)